<template>
  <div>
    <el-card class="box-card">
      <h1>菜品评分</h1>
      <el-form @submit.prevent="submitRating" label-width="100px">
        <el-form-item label="选择菜品:" required :for="`select-dish`">
          <!-- 菜品选择下拉菜单 -->
          <el-select v-model="selectedDishId" placeholder="请选择菜品" @change="loadRatings(true)" style="width: 100%;" id="select-dish">
            <el-option v-for="dish in dishes" :key="dish.id" :label="dish.name" :value="dish.id"></el-option>
          </el-select>
        </el-form-item>
        <div v-if="selectedDishId">
          <!-- 评分星级控件 -->
          <el-form-item label="评分:" required :for="`rate-dish`">
            <el-rate v-model="rating" id="rate-dish" />
          </el-form-item>
          <!-- 评论输入框 -->
          <el-form-item label="评论:" :for="`comment-dish`">
            <el-input type="textarea" v-model="comment" placeholder="请输入评论" id="comment-dish"></el-input>
          </el-form-item>
          
          <!-- 提交按钮 -->
          <el-form-item>
            <!-- 显示平均评分 -->
            <div v-if="selectedDishId">
              <div style="text-align: left; font-size: 16px; font-weight: bold;">平均得分: {{ averageRating }} &nbsp;&nbsp;&nbsp;  </div>
            </div>
            <el-button size="default" type="primary" @click="submitRating">提交评分</el-button>
          </el-form-item>
        </div>
      </el-form>
      
      <!-- 显示评分记录 -->
      <div v-if="displayedRatings.length">
        <div style="text-align: left; font-size: 16px; font-weight: bold;">评分记录</div>
        <div v-for="rating in displayedRatings" :key="rating.id" class="rating-card">
          <el-card>
            <div class="rating-content">
              <div><strong>评分:</strong> {{ rating.rating }}</div>
              <div><strong>评论:</strong> {{ rating.comment || '该用户什么也没有写' }}</div>
              <div><strong>时间:</strong> {{ formatDate(rating.created_at) }}</div>
            </div>
          </el-card>
        </div>
        <el-button v-if="hasMoreRatings" size="default" type="primary" @click="loadMoreRatings">加载更多</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'; // 引入Element Plus的消息组件，用于提示消息
import { format } from 'date-fns'; // 引入日期格式化库
import { zhCN } from 'date-fns/locale'; // 引入中文本地化配置
import apiClient from '../api'; // 引入自定义的API客户端，用于与后台交互

export default {
  props: ['dish_id'], // 接收父组件传递的菜品ID
  data() {
    return {
      selectedDishId: this.dish_id ? Number(this.dish_id) : null, // 初始化选择的菜品ID
      dishes: [], // 存储菜品列表
      rating: 0, // 存储评分
      comment: '', // 存储评论内容
      displayedRatings: [], // 存储当前显示的评分记录
      averageRating: 0, // 存储当前菜品的平均评分，默认值为5
      pageSize: 5, // 每页显示的评分数量
      currentPage: 1, // 当前页码
      hasMoreRatings: true // 是否还有更多评分记录
    };
  },
  methods: {
    // 获取所有菜品信息
    async fetchDishes() {
      try {
        const response = await apiClient.get('/dishes'); // 从服务器获取菜品数据
        this.dishes = response.data; // 将菜品数据赋值给dishes数组
      } catch (error) {
        console.error('Error fetching dishes:', error); // 如果请求出错，输出错误信息
      }
    },
    // 加载当前选择菜品的评分记录和平均评分
    async loadRatings(reset = false) {
      if (!this.selectedDishId) return; // 如果没有选择菜品，则不进行任何操作
      if (reset) {
        this.currentPage = 1; // 重置页码
        this.hasMoreRatings = true; // 重置是否还有更多评分记录
        this.displayedRatings = []; // 清空当前显示的评分记录
      }
      try {
        const [ratingsResponse, averageRatingResponse] = await Promise.all([
          apiClient.get(`/dishes/${this.selectedDishId}/ratings`, {
            params: {
              page: this.currentPage,
              per_page: this.pageSize
            }
          }),
          apiClient.get(`/dishes/${this.selectedDishId}/average-rating`)
        ]);
        const newRatings = ratingsResponse.data;
        if (reset) {
          this.displayedRatings = newRatings; // 重置时直接赋值
        } else {
          this.displayedRatings = [...this.displayedRatings, ...newRatings]; // 否则追加
        }
        this.averageRating = averageRatingResponse.data.average_rating; // 从服务器获取平均评分
        if (newRatings.length < this.pageSize) {
          this.hasMoreRatings = false; // 如果获取的数据量少于每页的大小，则表示没有更多评分记录
        } else {
          this.currentPage += 1; // 增加页码
        }
      } catch (error) {
        console.error('Error fetching ratings or average rating:', error); // 如果请求出错，输出错误信息
      }
    },
    // 提交评分
    async submitRating() {
      if (!this.selectedDishId || !this.rating) {
        ElMessage.error('请完整填写评分信息'); // 如果评分信息不完整，显示错误提示
        return;
      }

      try {
        // 向服务器提交评分数据
        await apiClient.post('/ratings', {
          dish_id: this.selectedDishId,
          rating: this.rating,
          comment: this.comment
        });
        ElMessage.success('评分提交成功!'); // 提交成功，显示成功提示
        this.resetForm(); // 重置表单
        this.loadRatings(true); // 重新加载评分记录
      } catch (error) {
        console.error('Error submitting rating:', error); // 如果提交出错，输出错误信息
        ElMessage.error('提交评分失败'); // 显示提交失败提示
      }
    },
    // 重置表单
    resetForm() {
      this.rating = 0; // 重置评分
      this.comment = ''; // 重置评论内容
    },
    // 加载更多评分记录
    loadMoreRatings() {
      this.loadRatings(); // 加载下一页评分记录
    },
    // 格式化日期
    formatDate(date) {
      return format(new Date(date), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }); // 将日期格式化为'yyyy-MM-dd HH:mm:ss'格式
    }
  },
  mounted() {
    this.loadRatings(); // 加载评分记录
    this.fetchDishes(); // 组件挂载时，获取菜品信息
  }
};
</script>

<style scoped>
.box-card {
  max-width: 600px;
  margin: 10px auto;
  padding: 10px;
}

.rating-card {
  margin-top: 10px;
}

.rating-content {
  text-align: left;
}
</style>